<template>
  <el-config-provider :locale="zhCn">
    <el-table
      :data="mapStore.trajectoryWeekTableData"
      border
      style="width: 100%"
      :row-style="mapStore.tableRowStyle"
      @row-click="onClickRow"
    >
    <el-table-column prop="vehicleNo" label="车牌号" width="100" />
      <el-table-column prop="startLon" label="起始经度" width="105" />
      <el-table-column prop="startLat" label="起始纬度" width="105" />
      <el-table-column prop="endLon" label="结束经度" width="105"/>
      <el-table-column prop="endLat" label="结束纬度" width="105"/>
      <el-table-column prop="minTime" label="开始时间" width="155"/>
      <el-table-column prop="maxTime" label="结束时间" width="155"/>
      <el-table-column prop="drivingTime" label="驾驶时长" width="95" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="text" :icon="Search"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="space-15"></div>

    <el-pagination
      size="small"
      background
      layout="total, sizes, prev, pager, next"
      :current-page="mapStore.trajectoryWeekTableCurrentPage"
      :page-size="mapStore.trajectoryWeekTablePageSize"
      :page-sizes="[5, 10]"
      :total="mapStore.basicInfoTableTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { Search } from "@element-plus/icons-vue";
import { fetchTrajectoryData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let currentPage = ref(1);
let pageSize = ref(5);

const tableRowStyle = (row: any) => {
  return row.rowIndex % 2 === 0
    ? { background: "rgba(14, 95, 255, 0.05)", cursor: "pointer" }
    : { background: "rgba(14, 95, 255, 0.15)", cursor: "pointer" };
};

const handleGetLocation = (index: number, row: any) => {
  window.open("/map/116.391844/39.898457", "_blank");
};

const onClickRow = (row) => {
  console.log("row");
  console.log(row.licensePlate);
  window.open(
    `/map/${row.vehicleNo}/${row.xc}/${row.minTime}/${row.maxTime}`,
    "_blank"
  );
};

// 分页大小改变时的回调
const handleSizeChange = (val) => {
  mapStore.trajectoryWeekTablePageSize = val;
  fetchTrajectoryData(
    mapStore.currentCar,
    mapStore.trajectoryWeekTableCurrentPage,
    mapStore.trajectoryWeekTablePageSize,
    "week"
  );
};

// 当前页改变时的回调
const handleCurrentChange = (val) => {
  mapStore.trajectoryWeekTableCurrentPage = val;
  fetchTrajectoryData(
    mapStore.currentCar,
    mapStore.trajectoryWeekTableCurrentPage,
    mapStore.trajectoryWeekTablePageSize,
    "week"
  );
};
</script>

<style scoped>
/* .el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
} */

.el-table{
  /* --el-table-border-color: transparent;
  --el-table-border: none; */
  /* --el-table-border: 1px solid rgba(19, 84, 134, 0.25); */
  --el-table-border-color: rgba(11, 53, 109, 0.25);
  --el-table-border: 1px solid rgba(11, 53, 109, 0.25);
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  /* --el-table-row-hover-bg-color: transparent; */
  --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.25);
  /* --el-table-current-row-bg-color: transparent; */
  --el-table-current-row-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-header-bg-color: transparent; */
  --el-table-header-bg-color: rgba(19, 84, 134, 0.5);
  /* --el-table-bg-color: transparent; */
  --el-table-bg-color: rgba(19, 84, 134, 0.25);
  /* --el-table-tr-bg-color: transparent; */
  --el-table-tr-bg-color: rgba(19, 84, 134, 0.25);
  --el-table-expanded-cell-bg-color: transparent;
}
</style>